﻿<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %> 
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CalendarFilterUserControl.ascx.cs" Inherits="PepsiCo.RBS.WebParts.CalendarFilter.CalendarFilterUserControl" %>

<script src="../../../_layouts/PepsiCo.RBS/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="../../../_layouts/PepsiCo.RBS/jquery.icheck.min.js" type="text/javascript"></script>

<!--
<style type="text/css">
.checkbox, .radio {
    width: 19px;
    height: 20px;
    padding: 0px;
    background: url("http://i48.tinypic.com/raz13m.jpg");
    display: block;
    clear: left;
    float: left;
 }

.checked {
     background-position: 0px -50px;   
}

.clicked {
     background-position: 0px -25px;
}

.clicked.checked {
     background-position: 0px -75px;
}


.green {
    background-color: green;
 }

 .red {
    background-color: red;
 }

.purple {
    background-color: purple;
 }

</style>

<div style="float:left; height:50px;"><asp:CheckBox ID="chk7Up" 
        CssClass="styled green" runat="server" AutoPostBack="True" />&nbsp;&nbsp;7Up&nbsp;&nbsp;</div>

<div style="float:left;"><input type="checkbox" name="1" class="styled green"/> (green)</div>

<div style="float:left;"><input type="checkbox" name="2" class="styled red" checked="checked" /> (red)</div>

<div style="float:left;"><input type="checkbox" name="3" class="styled purple" /> (purple)</div>

<div style="clear:both;"></div>
-->

<style>
	.listRooms li{float:left; margin-left: 20px;}
	.roomList {
		background: none repeat scroll 0 0 #FFFFFF;
		border: 3px solid #DDD8CE;
		color: #555555;
		margin-right: 360px;
		padding: 33px 57px 17px;
		position: relative;
		float: left;
	}
	.roomList ul {
		float: right;
		white-space: nowrap;
		list-style-type: none;
		list-style-image: none;
	}
	.roomList ul:first-child {
		float: left;
	}
	.roomList ul li {
		padding: 0 0 18px 42px;
		position: relative;
	}
	.roomList ul input {
		left: 0;
		position: absolute;
		top: 4px;
	}
	.roomList ul .vcheckbox {
		left: 0;
		position: absolute;
		top: -1px;
	}
	.roomList ul span {
		color: #BBBBBB;
	}
	
	.vcheckbox {
		border: 1px solid #BBBBBB;
		cursor: pointer;
		display: block;
		height: 22px;
		margin: 0;
		padding: 0;
		width: 22px;
	}
	.vcheckbox.checked {
		background-color: #BBBBBB;
	}
</style>
<div style="border: 1px solid red;" class="roomList clear">
	<div>
		<ul class="listRooms">
			<li>
				<input type="checkbox" id="v-flat-checkbox-1" value="1" checked>
				<label for="v-flat-checkbox-1">Checkbox 1</label>
				<div class="roomColor" style="display:none;">#FF0000</div>
				</li>
			<li>
				<input type="checkbox" id="v-flat-checkbox-2" value="2" checked>
				<label for="v-flat-checkbox-2">Checkbox 2</label>
				<div class="roomColor" style="display:none;">#FFFF00</div>
			</li>
			<li>
				<input type="checkbox" id="v-flat-checkbox-3" value="3" checked>
				<label for="v-flat-checkbox-3">Checkbox 3</label>
				<div class="roomColor" style="display:none;">#FF00FF</div>
			</li>
			<li>
				<input type="checkbox" id="v-flat-checkbox-4" value="4">
				<label for="v-flat-checkbox-4">Checkbox 4</label>
				<div class="roomColor" style="display:none;">#00FF00</div>
			</li>
			<li>
				<input type="checkbox" id="v-flat-checkbox-5" value="5">
				<label for="v-flat-checkbox-5">Checkbox 5</label>
				<div class="roomColor" style="display:none;">#00FFFF</div>
			</li>
			<li>
				<input type="checkbox" id="v-flat-checkbox-6" value="6" checked>
				<label for="v-flat-checkbox-6">Checkbox 6</label>
				<div class="roomColor" style="display:none;">#0000FF</div>
			</li>
		</ul>
	</div>
</div>

<script type="text/javascript">
    $(document).ready(function () {

        $('.listRooms input').on('ifChecked ifUnchecked ifCreated', function (event) {
            if (event.type == 'ifChecked') {
                var color = $(this).parents("li:last").find(".roomColor").text();
                $(this).parent().css("background-color", color).css("border", "none");
            }
            else if (event.type == 'ifUnchecked') {
                $(this).parent().css("background-color", "transparent").css("border", "1px solid #BBBBBB");
            }
            else if (event.type == 'ifCreated') {
                if ($(this).prop('checked')) {
                    var color = $(this).parents("li:last").find(".roomColor").text();
                    $(this).parent().css("background-color", color).css("border", "none");
                }
            }

            //log status
            $('.listRooms input').each(function () {
                console.log($(this).attr("id") + ": " + $(this).prop('checked') + " --- Value: " + $(this).val());
            });
            console.log("----------------------------------------------------");
        }).iCheck({
            checkboxClass: 'vcheckbox'
        });
        //change checkbox color for the first init
        /*
        $('.listRooms li:has(.checked)').each(function(){
        var color = $(".roomColor", $(this)).text();
        $(".checked", $(this)).css("background-color",color).css("border","none");
        });
        */


    });
</script>
